<template>
    <div class="proup" id="inputPP">
      <div class="ptem">
        <div class="i2d6">数据类型</div>
        <div class="i4d6">
          <el-select @change="component_change" v-model="rel.component" placeholder="请选择">
            <el-option
              v-for="item in compOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <v-probox-common v-model="rel.property" :tips="false"></v-probox-common>
      <hr>
      <div class="ptem">
        <div class="i6d6">
          <label><strong>填写设置</strong></label>
        </div>
      </div>
      <div class="ptem" v-show="rel.component=='v-date' ">
        <div class="i2d6">
          <label>日期格式</label>
        </div>
      </div>
      <div class="ptem" v-show="rel.component=='v-date' || rel.component=='v-datetime'">
        <div class="i6d6">
          <el-radio v-model="rel.property.date.dateFormat" label="yyyy-MM-dd">年-月-日</el-radio>
          <el-radio v-model="rel.property.date.dateFormat" label="MM-dd">月-日</el-radio>
          <el-radio v-model="rel.property.date.dateFormat" label="dd">仅日</el-radio>
        </div>
      </div>
      <div class="i6d6" v-show="rel.component=='v-time' || rel.component=='v-datetime'">
          <el-select v-model="rel.property.date.timeFormat" placeholder="请选择">
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      <div class="ptem" v-show="rel.component=='v-date' || rel.component=='v-datetime'">
        <div class="i6d6">
          <label><input type="checkbox" v-on:change="defaultDate" v-model="rel.property.date.defaultCurrentDate">默认显示日期为填表当前日期</label>
        </div>
      </div>
      <div class="ptem" v-show="rel.component=='v-time' || rel.component=='v-datetime'">
        <div class="i2d6">
          <label><input type="checkbox" v-model="rel.property.date.isLimitTime">时间范围</label>
        </div>
      </div>
      <div class="ptem" v-show="rel.component=='v-time' || rel.component=='v-datetime'">
        <div class="i6d6">
          <el-time-picker
            is-range
            @change="timepicker_change"
            format="HH:mm"
            v-model="timeRange"
            value-format="HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </div>
        
      </div>
      
      <hr>
      <v-probox-layout  v-model="rel.property"></v-probox-layout>
    </div>
</template>

<script>
import proboxCommon from './libs/pro-box-common'
import proboxLayout from './libs/pro-box-layout'

export default{
  props:["rel"],
  components:{
    'v-probox-layout':proboxLayout,
    'v-probox-common':proboxCommon
  },
  data:function(){
    return {
      timeRange: ['00:00:00','00:00:00'],
      compOptions:[{
        value: 'v-date',
        label: '日期'
      },{
        value: 'v-time',
        label: '时间'
      },{
        value: 'v-datetime',
        label: '日期+时间'
      }],
      timeOptions:[{
        label:'无',
        value:''
      },{
        label:'时',
        value:'HH'
      },{
        label:'时:分',
        value:'HH:mm'
      },{
        label:'时:分:秒',
        value:'HH:mm:ss'
      }]
    }
  },
  methods:{
    component_change:function(){
      this.rel.value=''
    },
    timepicker_change:function(){
      this.rel.property.time.selectableRange= this.timeRange[0]+'-'+this.timeRange[1]
    },
    defaultDate:function(event){
      console.info(event)
      this.rel.value=''
      if(this.rel.property.date.defaultCurrentDate){
        this.rel.value=new Date()
      }
      
    }
  }
}
</script>

<style>
</style>
